কয়েকটি ব্লক-লেভেল এলিমেন্ট নিম্নে দেখানো হলঃ

• -

• kt_satt_skill_example_id=746

  ---

  
  এলিমেন্টের ডিফল্ট display ভ্যালু পরিবর্তন

  আমরা ইতিমধ্যেই দেখেছি যে, প্রত্যেকটি এইচটিএমএল এলিমেন্টের জন্য একটি ডিফল্ট display ভ্যালু ব্যবহৃত হয়। যেমন- inline অথবা block। আপনি সিএসএস display প্রোপার্টি ব্যবহার করে এই ভ্যালু পরিবর্তন করতে পারেন।

  এইচটিএমএল এলিমেন্ট সমূহকে আপনি আপনার মত করে উপস্থাপন করার জন্য একটি ইনলাইন এলিমেন্টকে একটি ব্লক লেভেল এলিমেন্ট অথবা একটি ব্লক লেভেল এলিমেন্টকে ইনলাইন এলিমেন্টে রূপান্তরিত করতে পারেন। এতে ওয়েবে স্ট্যান্ডার্ড ভঙ্গ হয় না।

  হরিজন্টাল মেনুবার তৈরি করার জন্য < li> এলিমেন্টকে আমরা প্রায়ই ইনলাইন এলিমেন্টে রূপান্তরিত করি।

  kt_satt_skill_example_id=747

  বিঃদ্রঃ একটি এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত হবে তা ঠিক করে দেওয়ার জন্য সিএসএস display প্রোপার্টি ব্যবহার করা হয়। এলিমেন্টের ধরণ পরিবর্তন করার জন্য display প্রোপার্টি ব্যবহার করা হয় না। সুতরাং প্রোপার্টি-ভ্যালু display: block; সম্বলিত কোনো এইচটিএমএল এলিমেন্টের মধ্যে একই লাইনে অন্য কোনো এলিমেন্ট অবস্থান নিতে পারে না।

  
  নিচের উদাহরণে < span> এলিমেন্টকে ব্লক এলিমেন্ট হিসাবে প্রদর্শন করানো হলোঃ

  kt_satt_skill_example_id=749

  নিচের উদাহরণে < a> এলিমেন্টকে ব্লক এলিমেন্ট হিসাবে প্রদর্শন করানো হলোেঃ

  kt_satt_skill_example_id=752

  ---

  
  display: none; এর ব্যবহার

  একটি এলিমেন্টকে ডিলেট না করে বা পূনরায় সৃষ্টি না করে লুকানো অথবা দেখানোর জন্য জাভাস্ক্রিপ্টের সাথে display: none; প্রোপার্টি ব্যবহার করা হয়।

  < script> এলিমেন্টে ডিফল্টভাবে display: none; ব্যবহৃত হয়।

  ---

  kt_satt_skill_example_id=754

  ---

  এলিমেন্টকে সুপ্ত অবস্থায় রাখা

  এইচটিএমএল এলিমেন্টকে সুপ্ত(hidden) অবস্থায় রাখতে হলে প্রোপার্টি-ভ্যালু display: none; অথবা visibility:hidden ব্যবহার করতে হয়।

  display: none; ব্যবহার করলে এইচটিএমএল পেজ এমনভাবে প্রদর্শিত হবে মনে হবে সুপ্ত এলিমেন্টটি এই পেজে নেই।

  kt_satt_skill_example_id=756

  ---